<template>
  <span class="tech-badge" :class="[`tech-badge--${type}`, {'tech-badge--glow': glow}]">
    <slot></slot>
  </span>
</template>

<script>
export default {
  name: 'TechBadge',
  props: {
    type: {
      type: String,
      default: 'primary',
      validator: (value) => {
        return ['primary', 'secondary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    glow: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.tech-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  background-color: var(--medium-bg);
  color: var(--text-primary);
}

.tech-badge i {
  margin-right: 5px;
}

.tech-badge--primary {
  background-color: rgba(0, 102, 204, 0.1);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.tech-badge--secondary {
  background-color: rgba(44, 62, 80, 0.1);
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.tech-badge--success {
  background-color: rgba(6, 214, 160, 0.1);
  color: var(--success-color);
  border-color: var(--success-color);
}

.tech-badge--warning {
  background-color: rgba(255, 209, 102, 0.1);
  color: var(--warning-color);
  border-color: var(--warning-color);
}

.tech-badge--danger {
  background-color: rgba(239, 71, 111, 0.1);
  color: var(--danger-color);
  border-color: var(--danger-color);
}

.tech-badge--info {
  background-color: rgba(0, 204, 255, 0.1);
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.tech-badge--glow {
  animation: badge-glow 2s infinite;
}

@keyframes badge-glow {
  0% {
    box-shadow: 0 0 3px currentColor;
  }
  50% {
    box-shadow: 0 0 12px currentColor;
  }
  100% {
    box-shadow: 0 0 3px currentColor;
  }
}
</style> 